<template>
  <div id="tools">
    <div class="submit_content">
      <el-tabs type="border-card">
        <el-tab-pane label="文件上传">
          <div class="upload_file clearfix mgt10">
            <p class="file_name">文件：</p>
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="upload_url"
              :data="upload_data"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-upload="uploadBefore"
              :before-remove="beforeRemove"
              :on-progress="uploadProgress"
              :on-change="changeFile"
              :on-success="uploadSuccess"
              :on-error="uploadFail"
              :auto-upload="false"
              :name="file_name"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
              <div slot="tip" class="el-upload__tip">文件大小不超过5M</div>
            </el-upload>
          </div>
          <div class="sub_btns mgt20">
            <el-button style="position: initial" type="info" plain @click="cancel">取消</el-button>
            <el-button style="position: initial" type="primary" plain @click="submitUpload">提交</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import axios from "axios"

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

export default {
  data() {
    return {
      sumbMit: false,
      upload_url: "",
      upload_data: {},
      file_name: "",
      submit_key: false,
      upload_exit: false,
      text_exit: false,
      website_exit: false,
      input_url: "",
      textarea: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      if (!this.file_name) {
        this.$message({
          message: "请先上传文件再提交",
          type: "warning"
        });
        return;


      }

      console.log(777777777777, this.file_name);
      axios({
        method: 'post',
        url: 'apv/api/v1/courses/4/assignments/8/submissions/self/files',
        data: {
          filename: this.filename
        },
        changeOrigin: true
      }).then(res=>{
        console.log(res)
      })
    },
    cancel() {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    uploadProgress(event, file, fileList) {
      // console.log(event)

      // console.log("file",this.file)
      console.log(fileList);
    },
    changeFile(event) {
      var e = window.event || event;
      // 获取当前选中的文件
      this.file = e.target.files[0];

      this.file_name = this.file.name;
      // console.log("this.file",this.file)
    },
    uploadBefore(file) {
      console.log(file);
    },
    uploadSuccess(res, file, fileList) {
      if (res.data.upload_status == "success") {
        this.$message({
          message: "恭喜你，上传成功！",
          type: "success"
        });
        this.file_name = "";
      }
    },
    uploadFail(err, file, fileList) {
      if (err.data.upload_status != "success") {
        this.$message.error("上传失败，请重试！");
        this.file_name = "";
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.file_name = "";
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style scope>
#tools {
  text-align: center;
}
</style>
